<template>
  <div>
    <h1>编程式导航</h1>
    <nav>
      <ul>
        <li>
          <button @click="navigateToAbout">Go to About</button>
        </li>
        <li>
          <button @click="navigateToUser">Go to User 123</button>
        </li>
        <li>
          <button @click="navigateToPostComment">Go to Comment 101 on Post 789</button>
        </li>
        <li>
          <button @click="navigateToMainAbout">Go to Main About</button>
        </li>
        <li>
          <button @click="navigateToMainContact">Go to Main Contact</button>
        </li>
        <li>
          <button @click="goBack">Back</button>
        </li>
        <li>
          <button @click="goForward">Forward</button>
        </li>
        <li>
          <button @click="replacePath">Replace</button>
        </li>
      </ul>
    </nav>
    <router-view></router-view>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'

const router = useRouter()

const navigateToAbout = () => {
  router.push({ name: 'about' })
}

const navigateToUser = () => {
  router.push({ name: 'User', params: { userId: 123 } })
}

const navigateToPostComment = () => {
  router.push({ name: 'PostComment', params: { postId: 789, commentId: 101 } })
}

const navigateToMainAbout = () => {
  router.push({ path: '/main/about' })
}

const navigateToMainContact = () => {
  router.push({ path: '/main/contact' })
}

const goBack = () => {
  router.back()
}

const goForward = () => {
  router.forward()
}

const replacePath = () => {
  router.replace({ path: '/about' })
}
</script>
